<template>
    <div class="form">
        <i-form inline text-left ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="5">
            <Row>
                <col span="24">
                    <Form-item label="" prop="serialNo">
                        <i-input v-model="formValidate.serialNo" placeholder="工单号" @keyup.enter.native.stop.prevent="search"></i-input>
                    </Form-item>
                    <FormItem label="" prop="baseLevel" style="width:120px" >
                        <i-select v-model="formValidate.baseLevel" placeholder="问题大类" @on-change="search">
                            <i-option v-for="item in mainQUestionList" v-bind:value="item" v-bind:key="item">{{item}}</i-option>
                        </i-select>
                        <!-- <baseLevel :style="'width:150px'" v-on:getBaseLevel="getBaseLevel"></baseLevel> -->
                    </FormItem>
                    <Form-item label="" prop="levelOne" >
                        <i-select v-model="formValidate.levelOne" :label-in-value="true" placeholder="一级分类" @on-change="changeLevelOne" style="width:200px" >
                            <i-option v-for="item in one_list" :value="item.value" v-bind:key="item.value">{{item.label}}</i-option>
                        </i-select>
                        <!-- <levelOne v-on:getLevelOne="getLevelOne"></levelOne> -->
                    </Form-item>
                    <Form-item label="" prop="levelTwo">
                        <i-select v-model="formValidate.levelTwo" :label-in-value="true" placeholder="二级分类" @on-change="changeLevelTwo" style="width:200px">
                            <i-option v-for="val in two_list" :value="val.value" v-bind:key="val.value">{{val.label}}</i-option>
                        </i-select>
                        <!-- <levelTwo v-on:getLevelTwo="getLevelTwo"></levelTwo> -->
                    </Form-item>
                    <Form-item label="" prop="levelThree" style="width:200px">
                        <i-select v-model="formValidate.levelThree" :label-in-value="true" @on-change="changeLevelThree" placeholder="三级分类">
                            <i-option v-for="item in three_list" :value="item.value" v-bind:key="item.value">{{item.label}}</i-option>
                        </i-select>
                    </Form-item>
                </col>
            </Row>
            <Row>
                <col span="24">
                    <Form-item label="" prop="regTelNum">
                        <i-input v-model="formValidate.regTelNum" placeholder="注册手机号" @keyup.enter.native.stop.prevent="search"></i-input>
                    </Form-item>
                    <Form-item label="" prop="stuID">
                        <i-input v-model="formValidate.stuId" placeholder="学生编号" @keyup.enter.native.stop.prevent="search"></i-input>
                    </Form-item>
                    <Form-item label="" prop="creatorName">
                        <i-input v-model="formValidate.creatorName" placeholder="创建人" @keyup.enter.native.stop.prevent="search"></i-input>
                    </Form-item>
                    <Form-item label="" prop="creatorId">
                        <i-input v-model="formValidate.creatorId" placeholder="工号" @keyup.enter.native.stop.prevent="search"></i-input>
                    </Form-item>
                    <Form-item label="" prop="status">
                        <i-select v-model="formValidate.status" placeholder="工单状态" @on-change="search" style="width:120px">
                            <i-option v-for="item in selectStatus" :value="item.value" v-bind:key="item.value">{{item.label}}</i-option>
                        </i-select>
                    </Form-item>
                    <Form-item label="">
                        <Row>
                            <i-col span="11">
                                <Form-item prop="createTime">
                                    <Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm" v-model="formValidate.createTime" placeholder="选择开始时间至结束时间" style="width: 300px" @keyup.enter.native.stop.prevent="search"></Date-picker>
                                </Form-item>
                            </i-col>
                        </Row>
                    </Form-item>
                    <Form-item>
                        <i-button type="success" class="searchBtnColor" v-on:click="search">搜索</i-button>
                        <i-button type="success"  @click="handleReset('formValidate')">重置</i-button>
                        <i-button type="warning" :disabled="batchDisabled" @click="showAssignTaskDiv" style="margin-left: 8px" span="8" offset="8">批量派单</i-button>
                    </Form-item>
                </col>
            </Row>
        </i-form>
        <!-- @on-row-click="goTaskDetail" -->
        <i-table :row-class-name="rowClassName" :columns="workOrdercolumns1" :data="taskPendingListData" @on-selection-change="selectChange"></i-table>
        <Row>
            <i-col span="24" align="center">
                <Page v-if="totalElements >0" :total="totalElements" :page-size="pageSize" :page-size-opts="opts"  @on-change="changePage" size="small" show-total show-elevator show-sizer style="margin-top: 20px;"></Page>
            </i-col>
        </Row>
    </div>
</template>
<script>
    import {
        mapGetters
    } from 'vuex'
    import {
        formatDate,
    } from '@/libs/filter.js'
    import taskService from 'service/taskService.js'
    import configService from 'service/configService.js'

    import assignTaskAction from './assignTask'
    import baseLevel from 'components/searchFormItem/baseLevel.vue'
    export default {
        name: 'taskPending',
        props: {
            data: Object,
        },
        data() {
            return {
                loading: false,
                selectStatus: [{
                    value: 'OPEN',
                    label: "未处理"
                }, {
                    value: "PENDING",
                    label: '处理中'
                }, {
                    value: 'CLOSED',
                    label: '已完结'
                }],
                mainQUestionList: ['咨询', '投诉', '其他'],
                batchDisabled: true,
                // 派单
                handleBatch: [],
                totalElements: 0,
                pageSize:10,
                page: 0,
                opts: [10],
                state: '',
                value: '',
                formValidate: {
                    serialNo: '',
                    baseLevel: '',
                    levelOne: '',
                    levelTwo: '',
                    levelThree: '',
                    regTelNum: '',
                    stuId: '',
                    creatorName: '',
                    creatorId: '',
                    status: '',
                    createTime: "",

                    nextHandlerGroupId: '',
                    nextHandlerGroupName: '',
                    nextHandlerName: '',
                    nextHandlerId: '',
                },
                options: {
                    handlerGroupOptionList: [],
                    handlerOptionList: [],
                },
                ruleValidate: {
                    nextHandlerGroupName: [{
                        required: true,
                        message: '请选择处理组！',
                        trigger: 'change'
                    }],
                },
                workOrdercolumns1: [{
                    title: '全选',
                    type: 'selection',
                    width: 60,
                    align: 'center',
                    key: 'selectAll',
                }, {
                    title: '工单号',
                    key: 'serialNo',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('a', {
                                props: {
                                    // size: 'small'
                                },
                                on: {
                                    click: () => {
                                        let id = params.row.id;
                                        let task_type = '待分配工单'
                                        let newTagObj = {
                                            path: '/taskdetail?id=' + id + '&action_type=taskPending',
                                            is_nav: false,
                                            title: task_type + '-工单详情',
                                            name: 'taskdetail_index',
                                            children: []
                                        }
                                        this.$store.dispatch('recordDetailPageTags', newTagObj)
                                        this.$router.push({
                                            path: 'taskdetail',
                                            query: {
                                                id: id,
                                                action_type: 'taskPending'
                                            }
                                        })
                                    }
                                }
                            }, params.row.serialNo)
                        ]);
                    }
                }, {
                    title: '问题大类',
                    key: 'baseLevel',
                    align: 'center',
                }, {
                    title: '一级分类',
                    key: 'levelOne',
                }, {
                    title: '二级分类',
                    key: 'levelTwo',

                }, {
                    title: '三级分类',
                    key: 'levelThree'

                }, {
                    title: '四级分类',
                    key: 'levelFour',

                }, {
                    title: '工单状态',
                    key: 'status',
                    render: (h, params) => {
                        return this.Func.getChineseTaskStatus(params.row.status)
                    }
                }, {
                    title: '提单时间',
                    key: 'createTime',
                    width: 140,

                }, {
                    title: '创建组',
                    key: 'creatorGroupName',

                }, {
                    title: '创建人',
                    key: 'creatorName',

                }, {
                    title: '工号',
                    key: 'creatorId',

                }, {
                    title: '追单次数',
                    key: 'appendCount',

                }, ],
                taskPendingListData: [],
                // id组
                ticketIds: [],
                one_list: [],
                two_list: [],
                three_list: [],
                one_object: [],
                two_object: [],
                three_object: [],
                curr_opt_id: '',
                curr_opt_id_two: '',
                curr_opt_id_three: '',
            }
        },
        computed: {
            ...mapGetters({
                loginUserInfo: 'loginUserInfo'
            })
        },
        components: {
            // baseLevel
        },
        methods: {
            handleReset(name) {
                this.$refs[name].resetFields();
                this.taskPendingList();
            },
            // keySearch(value){
            //     var _this = this;
            //     window.onkeydown = function(e){
            //         if(e.keyCode === 13);
            //         _this.search();
            //     }
            // },
            // getBaseLevel(value) {
            //     this.formValidate.baseLevel = value;
            //     this.keySearch(value);
            // },
            selectChange: function(data) {
                if (data) {
                    this.handleBatch = data;
                }
            },
            tickIdArray(id) {
                for (let i in this.handleBatch) {
                    console.log("handleBatch---", this.handleBatch[i].id);
                }
                return id;
            },
            //处理超过工单处理时效的工单 状态
            rowClassName(row, index) {
                var mark = row.mark;
                if (mark === "ALERT") {
                    return 'task-table-orange-row';
                }
                if (mark === "WARN") {
                    return 'task-table-yellow-row';
                }
                return '';
            },
            // 根据条件搜索待处理工单
            async search(page, groupId) {
                this.loading = true;
                this.formValidate.levelOne = this.curr_opt_id.label;
                this.formValidate.levelTwo = this.curr_opt_id_two.label;
                this.formValidate.levelThree = this.curr_opt_id_three.label;

                // page?page:0;

                groupId = this.loginUserInfo.curHandlerGroupId;
                if (!groupId) {
                    this.loading = false;
                    return false;
                }

                let params = {
                    "page": this.page,
                    "size": this.pageSize,
                    "userId": this.loginUserInfo.userId,
                };
                if (this.formValidate.serialNo) {
                    Object.assign(params, {
                        'serialNo': this.formValidate.serialNo,
                    })
                }
                if (this.formValidate.baseLevel) {
                    Object.assign(params, {
                        'baseLevel': this.formValidate.baseLevel,
                    })
                }
                if (this.formValidate.levelOne) {
                    Object.assign(params, {
                        'levelOne': this.formValidate.levelOne,
                    })
                }
                if (this.formValidate.levelTwo) {
                    Object.assign(params, {
                        'levelTwo': this.formValidate.levelTwo,
                    })
                }
                if (this.formValidate.levelThree) {
                    Object.assign(params, {
                        'levelThree': this.formValidate.levelThree,
                    })
                }
                if (this.formValidate.status) {
                    Object.assign(params, {
                        'status': this.formValidate.status,
                    })
                }
                if (this.formValidate.createTime[0] && this.formValidate.createTime[1] != "NaN-aN-aN aN:aN:aN") {
                    Object.assign(params, {
                            'startDateTime': formatDate(this.formValidate.createTime[0], 'yyyy-MM-dd hh:mm:ss'),
                        })
                        // this.keySearch();
                }
                if (this.formValidate.createTime[1] && this.formValidate.createTime[1] != "NaN-aN-aN aN:aN:aN") {
                    Object.assign(params, {
                            'endDateTime': formatDate(this.formValidate.createTime[1], 'yyyy-MM-dd hh:mm:ss'),
                        })
                        // this.keySearch();
                }
                if (this.formValidate.creatorName) {
                    Object.assign(params, {
                        'creatorName': this.formValidate.creatorName,
                    })
                }
                if (this.formValidate.creatorId) {
                    Object.assign(params, {
                        'creatorId': this.formValidate.creatorId,
                    })
                }
                if (this.formValidate.stuId) {
                    Object.assign(params, {
                        'stuId': this.formValidate.stuId,
                    })
                }

                if (this.formValidate.regTelNum) {
                    Object.assign(params, {
                        'regTelNum': this.formValidate.regTelNum,
                    })
                }

                let taskData = await taskService.taskPendingList(params, groupId);
                if (taskData.state) {
                    this.loading = false;
                    this.taskPendingListData = taskData.data.content;
                    this.totalElements = taskData.data.totalElements;
                }
            },
            async taskPendingList(data, groupId) {
                let _this = this;
                _this.loading = true;
                groupId = _this.loginUserInfo.curHandlerGroupId;
                if (!groupId) {
                    _this.loading = false;
                    return false;
                }
                let dataObj = {
                    "page": _this.page,
                    "size": _this.pageSize,
                    "userId": _this.loginUserInfo.userId,
                }

                let jsonData = await taskService.taskPendingList(dataObj, groupId);
                if (jsonData.state) {
                    _this.loading = false;
                    _this.taskPendingListData = jsonData.data.content;
                    _this.totalElements = jsonData.data.totalElements;
                }
            },
            changePage(page) {
                var vm = this;
                vm.page = parseInt(page - 1);
                vm.taskPendingList({
                    "groupId": vm.loginUserInfo.curHandlerGroupId,
                    "page": vm.page,
                    "size": vm.pageSize,
                }, page);
            },
            // 派单
            // 显示 派单 弹层
            showAssignTaskDiv() {
                for (let i in this.handleBatch) {
                    this.ticketIds.push(this.handleBatch[i].id);
                }
                let data = {
                    'propId': this.ticketIds,
                    "errorFlag": this.formValidate.errorFlag,
                    "errorInfo": this.formValidate.errorInfo,
                }
                assignTaskAction.showAssignTask({
                    'data': data,
                    'remove': assignTaskAction.remove,
                })
            },
            // goTaskDetail(rowdata) {
            //     let id = rowdata.id;
            //     let task_type = '待分配工单'
            //     let newTagObj = {
            //         path: '/taskdetail?id=' + id + '&action_type=taskPending',
            //         is_nav: false,
            //         title: task_type + '-工单详情',
            //         name: 'taskdetail_index',
            //         children: []
            //     }
            //     this.$store.dispatch('recordDetailPageTags', newTagObj)
            //     this.$router.push({
            //         path: 'taskdetail',
            //         query: {
            //             id: id,
            //             action_type: 'taskPending'
            //         }
            //     })
            // },
            getHandlerGroupData(data) {
                this.formValidate.nextHandlerGroupId = data.value
                this.formValidate.nextHandlerGroupName = data.label
                this.getHanderList({
                    "orgIdList": this.formValidate.nextHandlerGroupId
                })
            },
            async getHanderList(data) {
                let jsondata = await configService.getUsersByGroupId(data)
                this.options.handlerOptionList = jsondata

            },
            getHandlerData(data) {
                this.formValidate.nextHandlerId = data.value
                this.formValidate.nextHandlerName = data.label
            },
            changeLevelOne(currObj) {
                let _this = this;
                if (_this.Func.isNull(currObj.value) && _this.Func.isNull(currObj.label)) {
                    _this.curr_opt_id = currObj;
                    _this.one_list = _this.getList(_this.one_object);
                    _this.search();
                }

            },
            changeLevelTwo(currObj) {
                let _this = this;
                if (_this.Func.isNull(currObj.value) && _this.Func.isNull(currObj.label)) {
                    _this.curr_opt_id_two = currObj;
                    _this.two_list.forEach((x, y) => {
                        if (_this.curr_opt_id_two.value === x.value) {
                            _this.three_object = x.children;
                            _this.three_list = _this.getList(_this.three_object);
                        }
                    })
                    _this.search();
                }
            },
            changeLevelThree(currObj) {
                let _this = this;
                if (_this.Func.isNull(currObj.value) && _this.Func.isNull(currObj.label)) {
                    _this.curr_opt_id_three = currObj;
                    _this.search();
                }
            },
            async getQuestion() {
                let _this = this;
                let jsondata = await configService.getQuestionTypeList();
                if (!jsondata) {
                    return false;
                }
                _this.one_object = jsondata.children;
                _this.one_list = _this.getList(jsondata.children);
            },
            getList(list = []) {
                let _this = this;
                let oneArray = [];
                if (!!list && list.length !== 0) {
                    list.forEach((item, index) => {
                        let oneObj = {};
                        oneObj.label = item.text;
                        oneObj.value = item.id;
                        oneObj.children = item.children;
                        if (_this.curr_opt_id.value === item.id) { //匹配id
                            _this.two_list = _this.getList(item.children); //递归调用
                            _this.two_object = item.children;
                        };
                        oneArray.push(oneObj);
                    });
                }
                return oneArray;
            }

        },
        created() {
            this.taskPendingList();
            this.getHanderList();
            this.getQuestion();
            let vm = this
            eventBus.$on('refreshTaskPendingList', function() {
                vm.taskPendingList();
            })
        },
        mounted() {},
        watch: {
            loginUserInfo(newObj, oldObj) {
                this.taskPendingList();
            },
            handleBatch: function() {
                if (this.handleBatch.length === 0) {
                    this.batchDisabled = true;
                } else {
                    this.batchDisabled = false;
                }
            },
        }
    }
</script>
<style scoped>
    .form {
        width: 100%;
        text-align: left;
    }
    
    .task-group .ivu-select {
        width: 200px!important;
    }
</style>